<template>
    <!-- 微型消防站管理 -->
    <div class="mini-fire-station-manage-wrap">
        <el-row class="overview-wrap" :gutter="40">
            <el-col :span="24">
                <div class="item-wrap">
                    <p class="item-value color-4">{{ total }}</p>
                    <p class="item-title">微型消防站总览</p>
                </div>
            </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="请输入微型消防站名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="getTableData(1)">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="more-btns">
                <el-button type="primary" @click="addMinFireStation">新增</el-button>
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">下载模板</el-dropdown-item>
                        <el-dropdown-item command="2">批量导入</el-dropdown-item>
                        <!-- <el-dropdown-item command="3">批量导出</el-dropdown-item> -->
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-row>
        <el-table
            v-loading="loading"
            ref="multioleUnitsTableList"
            :data="tableData"
            style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="图片" prop="orgName" width="100">
                <template v-if="scope.row.url != ''" slot-scope="scope">
                    <img :src="scope.row.url.split(',')[0]" width="50px" height="50px" @click="$imgPreview" :data-imgpreview="scope.row.picturesUrls">
                </template>
            </el-table-column>
            <el-table-column label="消防站名称" prop="name"></el-table-column>
            <el-table-column label="位置" prop="location"></el-table-column>
            <el-table-column label="经度" prop="lon"></el-table-column>
            <el-table-column label="纬度" prop="lat"></el-table-column>
            <el-table-column label="联系电话" prop="tel"></el-table-column>
            <el-table-column label="战斗人数" prop="scale"></el-table-column>
            <el-table-column label="负责人" prop="chargePerson"></el-table-column>
            <el-table-column label="负责人电话" prop="chargePhone"></el-table-column>
            <el-table-column label="创建日期" prop="createTime"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="editFireStation(scope.row)" type="text" size="small">编辑</el-button>
                    <span class="dividing-line">|</span>
                    <el-button @click="deleteFireStation(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            v-show="tableData.length > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!-- 新增/编辑弹框  -->
         <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="600px"
            top='10vh'
            v-if="dialogBaseInfo"
            :visible.sync="dialogBaseInfo"
            @close="closeStationInfo"
            v-dialogDrag>
            <min-fire-station-info :oldInfo="stationInfo" :closeFun="closeStationInfo"></min-fire-station-info>
        </el-dialog>
        <!-- 导入选择单位 -->
         <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitleTwo"
            width="600px"
            top='10vh'
            v-if="dialogBaseInfoTwo"
            :visible.sync="dialogBaseInfoTwo"
            @close="closeStationInfo"
            v-dialogDrag>
            <import-min-fire-station :closeFun="closeStationInfoTwo"></import-min-fire-station>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.mini-fire-station-manage-wrap {
  .more-btns {
    height: 40px;
    .el-dropdown {
      margin-left: 20px;
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #409EFF;
      border-radius: 3px;
    }
  }
}
</style>
<script>
import { getMinFireHouse, deleteMiniFireHouse } from '@/api/sysConfig'
import MinFireStationInfo from './Dialog/MinFireStationInfo'
import importMinFireStation from './Dialog/importMinFireStation'

export default {
    name: 'MinFireStationManage',
    components: {
       MinFireStationInfo,
       importMinFireStation
    },
    data() {
        return {
    		loading: true,
            searchForm: {
                name: '',
            },
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData:[],
            /* 弹框 */
            dialogBaseInfo:false,
            dialogTitle:'',
            stationInfo:{},
            /*批量导入-弹框*/
            dialogBaseInfoTwo:false,
            dialogTitleTwo:'',
    	}
    },
    created() {
    	var that = this;
    	that.getTableData()
    },
    methods:{
    	getTableData(pageIndex, pageSize) {
    		let that = this;
            that.loading = true;
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            //参数
            let parames = {
                orgIds: that.$store.state.userinfo.organizationIds,
                name: that.searchForm.name,
                pageSize: that.pageSize,
                pageIndex: that.currentPage - 1
            }

            // 获取列表信息
            getMinFireHouse(parames).then(res => {
            	that.tableData = res.data;
                that.total = res.total;
                that.loading = false;
            });
    	},
    	handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        addMinFireStation() {
        	var that =this;
        	that.dialogTitle = "新增微型消防站";
        	that.dialogBaseInfo = true;
        	that.stationInfo = {};
        },
        /* 编辑列表 */
        editFireStation(row) {
            var that = this;
            that.dialogTitle = '编辑微型消防站';
            that.dialogBaseInfo = true;
            that.stationInfo = row;
        },
        /* 删除一行数据 */
        deleteFireStation(row) {
            var that = this;

            that.$confirm("确定删除该消防站吗？", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
            }).then(() => {
                deleteMiniFireHouse({id: row.id}).then(res => {
                    if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        that.getTableData()
                    } else {
                        that.$message.error(res.info);
                    }
                });
            });
        },
        /*关闭弹框*/
        closeStationInfo(flag) {
            var that = this;
            that.dialogBaseInfo = false;
            if (flag) {
                that.getTableData(this.stationInfo.id?'':1);
            }
        },
        closeStationInfoTwo(flag) {
             var that = this;
            that.dialogBaseInfoTwo = false;
            if (flag) {
                that.getTableData();
            }
        },
        /* 更多操作 */
        handleCommand(command) {
            var that = this;
            /* 下载模板 */
            if(command == '1') { 
                window.location.href= that.GLOBAL.baseURL + "miniFireHouse/downATemplate";
            }
            
            /* 批量导入 */
            if(command == '2') { 
                that.dialogTitleTwo = "导入Excel";
                that.dialogBaseInfoTwo = true;
            }
           
           /* 批量导出 */
            if(command == '3') {

            }
        }
    }
}
</script>
